<template>
  <div>

    <div  class="weui-tabbar">
      <router-link to="/home" class="weui-tabbar__item" v-bind:class="{ 'router-link-active': this.$router.history.current.path == '/home'}">
        <div class="weui-tabbar__icon icon-class">
            <icon slot="icon" name="home" scale="1.5"></icon>
        </div>
        <p class="weui-tabbar__label"><span class="fs">首页</span></p>
      </router-link>
      <router-link to="/activity" class="weui-tabbar__item" v-bind:class="{ 'router-link-active': this.$router.history.current.path == '/activity'}">
        <div class="weui-tabbar__icon icon-class">
            <icon slot="icon" name="bars" scale="1.5"></icon>
        </div>
        <p class="weui-tabbar__label"><span class="fs">活动</span></p>
      </router-link>
      <router-link to="/specialColumn" class="weui-tabbar__item" v-bind:class="{ 'router-link-active': this.$router.history.current.path == '/specialColumn'}">
        <div class="weui-tabbar__icon icon-class">
            <icon slot="icon" name="maxcdn" scale="1.5"></icon>
        </div>
        <p class="weui-tabbar__label"><span class="fs">专栏</span></p>
      </router-link>
      <router-link to="/me" class="weui-tabbar__item" v-bind:class="{ 'router-link-active': this.$router.history.current.path == '/me'}">
        <div class="weui-tabbar__icon icon-class">
            <icon slot="icon" name="user-circle" scale="1.5"></icon>
        </div>
        <p class="weui-tabbar__label"><span class="fs">我</span></p>
      </router-link>
    </div>

    
  </div>
</template>
<script>
import { Tabbar, TabbarItem, Group, Cell } from 'vux'
import Icon from 'vue-awesome'
export default {
  components: {
    Tabbar,
    TabbarItem,
    Group,
    Cell,
    Icon
  },
  mounted () {
    if (this.$router.history.current.path === '/home') {
      console.log('路径是一个home')
    } else if (this.$router.history.current.path === '/market') {
      console.log('路径是一个home')
    }
    console.log(this.$router)
    console.log(this.$router.history.current.path)
  },
  data () {
    return {
      index: 0,
      currentPage: this.$router.history.current.path
    }
  }
}
</script>
<style>
.fs{
  font-size: 12px;
}
.weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon, .weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon > i, .weui-tabbar__item.weui-bar__item_on .weui-tabbar__label {
    color: rgb(216, 65, 65) !important;
}

.router-link-exact-active, .router-link-exact-active p{
  color: rgb(216, 65, 65) !important;
}

.router-link-active, .router-link-active p{
  color: rgb(216, 65, 65) !important;
}
</style>
